import styles from './index.less';
import { Input, Badge } from 'antd';
import LableInput from '../LableInput';
import LableSelect from '../LableSelect';
import LableInputNumber from '../LableInputNumber';
import common from '../../common';
export default props => {
  let balanceStatus = 'default';
  let debtorAmount = 0;
  let lenderAmount = 0;
  props.voucherData.forEach((value, index) => {
    if (value.debtorAmount) {
      debtorAmount += parseFloat(value.debtorAmount);
    }
    if (value.lenderAmount) {
      lenderAmount += parseFloat(value.lenderAmount);
    }
  });
  if (debtorAmount != lenderAmount) {
    balanceStatus = 'error';
  } else {
    balanceStatus = 'success';
  }
  if (debtorAmount == 0 && lenderAmount == 0) {
    balanceStatus = 'default';
  }
  return (
    <table className={styles.voucher}>
      <thead>
        <tr>
          <th style={{ width: '200px' }} className={styles.colsummary}>
            摘要
          </th>
          <th style={{ width: '200px' }}>会计科目</th>
          <th style={{ width: '289px' }}>
            <strong>借方金额</strong>
            <div className={styles.moneysplit}>
              <span>亿</span> <span>千</span> <span>百</span> <span>十</span>
              <span>万</span> <span>千</span> <span>百</span> <span>十</span>
              <span>元</span> <span>角</span>
              <span className={styles.spanlast}>分</span>
            </div>
          </th>
          <th style={{ width: '289px' }}>
            <strong>贷方金额</strong>
            <div className={styles.moneysplit}>
              <span>亿</span> <span>千</span> <span>百</span> <span>十</span>
              <span>万</span> <span>千</span> <span>百</span> <span>十</span>
              <span>元</span> <span>角</span>{' '}
              <span className={styles.spanlast}>分</span>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        {props.voucherData.map(item => {
          return (
            <tr key={'vd' + item.sort}>
              <td className={styles.colsummary}>
                <LableInput
                  value={item.abstract}
                  onFocusLeaves={event => {
                    item.abstract = event.target.value;
                    props.onVoucherChange(item);
                  }}
                ></LableInput>
              </td>
              <td>
                <LableSelect
                  value={item.subjectCode}
                  treeData={props.subjectList}
                  onFocusLeaves={event => {
                    item.subjectCode = event.value;
                    props.onVoucherChange(item);
                  }}
                ></LableSelect>
              </td>
              <td>
                <LableInputNumber
                  onFocusLeaves={event => {
                    item.debtorAmount = event.target.value;
                    props.onVoucherChange(item);
                  }}
                  value={item.debtorAmount}
                ></LableInputNumber>
              </td>
              <td>
                <LableInputNumber
                  onFocusLeaves={event => {
                    item.lenderAmount = event.target.value;
                    props.onVoucherChange(item);
                  }}
                  value={item.lenderAmount}
                ></LableInputNumber>
              </td>
            </tr>
          );
        })}
      </tbody>
      <tfoot>
        <tr>
          <td colSpan="2">
            <Badge status={balanceStatus} text="合计：" />
          </td>
          <td>
            <div className={styles.vouchermoney}>
              {common.getsplitSpan(debtorAmount, 11, styles)}
            </div>
          </td>
          <td>
            <div className={styles.vouchermoney}>
              {common.getsplitSpan(lenderAmount, 11, styles)}
            </div>
          </td>
        </tr>
        <tr style={{ border: 0 }}>
          <td style={{ textAlign: 'left', border: 0 }} colSpan="4">
            制表人：xxxx
          </td>
        </tr>
      </tfoot>
    </table>
  );
};
